<template>
  <div>
    <el-tree
      :data="folderOptions"
      :props="defaultProps"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :render-content="renderTreeContent"
      ref="tree"
      node-key="id"
      default-expand-all
      highlight-current
      @node-click="handleNodeClick"
    />

    <div class="tree-right-option" v-show="rightDisplay" :style="{left: optionleft+'px',top: optiontop+'px'}">
      <div class="tree-right-box" @mouseenter="rightOptionHover()" @mouseleave="rightOptionHoverOut()">
        <ul class="tree-right-list">
          <li @click="modifyFolder"><i class="tree-icon el-icon-edit-outline"></i>修改</li>
          <li @click="deleteFolder"><i class="tree-icon el-icon-delete"></i>删除</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ["folderOptions",],
  data() {
    return {
      rightDisplay:false,
      optionleft: -10000,
      optiontop: -10000,
      curData:{},
      defaultProps: {
        children: "children",
        label: "name"
      },
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.$emit("handleNodeClick", data)
    },
    renderTreeContent(h, { node, data, store }) {
      return (
        <div class="custom-tree-node">
          <i class={'tree-icon tree-icon-folder'}></i>
          <div class="custom-tree-node-cont">
            <span class={'tree-node-word'}>{data.name}</span>
            <span class="el-icon-more el-icon-more-v" on-click={ ($event) => this.clickShowMore($event,data) } on-mouseover={ ($event) => this.hoverShowMore($event,data) } on-mouseout={ ($event) => this.hoverHideMore($event,data) }></span>
          </div>
        </div>
      )
    },
    clickShowMore(e,data) {
      this.rightClickStatus = true;
      this.showRightClick(e,data);
      e.stopPropagation();
    },
    hoverShowMore (e,data) { //显示更多
      clearTimeout(this.hideRightTime);
      if(this.rightClickStatus) return;   //如果通过点击已显示操作，不触发hover
      this.hoverRightTime = setTimeout(() => {
        this.showRightClick(e,data);
      },300);
      e.stopPropagation();
    },
    hoverHideMore () { //鼠标移开更多操作按钮
      clearTimeout(this.hoverRightTime);
      this.hideRightTime = setTimeout(() => {
        this.hideRightOption();
      },500);
    },
    rightOptionHover () {
      clearTimeout(this.hideRightTime);
    },
    rightOptionHoverOut () {
      var _this = this;
      this.hideRightTime = setTimeout(function(){
        _this.hideRightOption();
      },500);
    },
    showRightClick (e, obj) { //显示右击框
      this.rightDisplay = true
      setTimeout(() => {
        var rightMenuH = document.querySelector(".tree-right-box").offsetHeight;
        var bodyH = document.documentElement.clientHeight
        this.optiontop = (e.clientY + rightMenuH > bodyH) ? e.clientY - rightMenuH : e.clientY
        this.optionleft = e.clientX + 15;
        // this.$refs['treeRightComp'].setData(obj)
      }, 0)
      this.curData = obj;
      document.body.onclick = () => {
        this.hideRightOption();
      }
    },
    hideRightOption () { //隐藏更多操作项
      this.rightDisplay = false;
      document.body.onclick = null
      this.rightClickStatus = false;
    },
    modifyFolder() {
      console.log("this.curData", this.curData)
      this.$emit("modifyFolder", this.curData)
    },
    deleteFolder() {
      this.$emit("deleteFolder", this.curData)
    }
  }
}
</script>
<style lang="scss" scoped>
  ::v-deep {
    .el-tree-node__content {
      min-height: 34px;
      height: auto;
    }
    .custom-tree-node {
      display: flex;
      flex: 1;
    }
    .custom-tree-node-cont {
      position: relative;
      width: 100%;
      font-size: 14px;
      line-height: 18px;
      padding-right: 15px;
    }
    .el-icon-more-v {
      width: 20px;
      text-align: center;
      position: absolute;
      top: 50%;
      margin-top: -6px;
      right: 5px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      color: #98999c;
    }
    .tree-icon {
      margin-right: 5px;
    }

    .el-icon-more-v:hover {
      color: #1890ff
    }

    .tree-right-option {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 10000;
      border: 1px solid #e6ebf5;
      border-radius: 4px;
      -webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      background-color: #fff;
    }

    .tree-right-box .tree-right-list {
      background-color: #fff;
      margin: 0;
      padding:0;
    }

    .tree-right-box .tree-right-list li {
      list-style: none;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      font-size: 14px;
      color: #343434;
      margin: 0;
      padding: 0 25px 0 15px;
    }
    .tree-right-box .tree-right-list li:hover {
      background-color: #edf6ff;
    }

    .tree-right-box .tree-right-list li .tree-icon {
      display: inline-block;
      height: 16px;
      width: 16px;
      margin-right: 5px;
      position: relative;
      // top: 3px
    }
    .tree-icon-folder {
      height: 24px;
      width: 24px;
      display: inline-block;
      background-image: url(../../assets/images/folder/folder.png);
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
</style>